<script setup>
import { ref } from "vue"
import { reactive, toRefs } from 'vue'
import { UploadFilled,SwitchButton,CameraFilled } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"
import headBar from '../components/HeadBar.vue'
import axios from "axios";
import router from "@/router";
import { useRouter } from "vue-router";
import { shrinkImage } from "shrinkpng";

var submitImage = ref(true)
const isImageVisible = ref(false)
const messageImageUrl = ref('')
const yourMessage = ref('')
const messageImageFile = ref()
const userouter = useRouter()
const loading = ref(false)
const messageImageLoading = ref(false)

function submitPost() {
  loading.value = true;
  axios({
    method:"post",
    url:"/post/submit",
    data:{
      content:yourMessage.value,
      image:messageImageFile.value
    },
    headers:{
      'Content-Type':'multipart/form-data'
    }
  })
  .then(function(response) {
    console.log(response)
    if(response.data.status) {
      loading.value = false
      router.push("/Message")
      ElMessage.success("上传成功")
    } else {
      loading.value = false;
      ElMessage.error("上传失败,请检查网络情况")
    }
  })
  .catch(error => {
        loading.value = false
        ElMessage.error("你传入的图片可能过大")
    });

}

function uploadImage() {
}

function scaleImage() {
    isImageVisible.value = true
}

function hideImage() {
    isImageVisible.value = false
}

function cancelImage() {
    console.log("取消成功")
    messageImageUrl.value = ''
    submitImage.value = true
}


async function messageImageChange(file) {
  messageImageLoading.value = true
    console.log(file)
    const _file = await shrinkImage(file.raw, {
        quality: 60
      });
      console.log(_file)
    messageImageFile.value = _file
    messageImageUrl.value = getObjectURL(_file)
    console.log(messageImageUrl.value)
    submitImage.value = false
    messageImageLoading.value = false
}

function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }



</script>

<template>

    <!-- 横幅html开头 -->
    <headBar/>
    <!-- 横幅html结尾 -->
    <div v-loading="loading">
      <div style="text-align: center;">
        <textarea id="message" v-model="yourMessage" cols="30" rows="10" placeholder="你的留言...."></textarea>
      </div>

      <div style="margin-left: 10%;margin-top: 20px;">
          <el-upload
              v-if="submitImage"
              accept="image/*"
              class="message_image_uploader"
              :show-file-list="false"
              :auto-upload="false"
              :onChange="messageImageChange"
              v-loading="messageImageLoading"
          >
              <el-icon class="message_uploader_icon" :size="50">
                  <CameraFilled />
              </el-icon>
          </el-upload>

          <div class="backImage" v-if="!submitImage" :style="{'background-image': 'url(' + messageImageUrl + ')'}">
              <div class="upload-btns">
                  
                  <button className="btn btn-circle btn-ok" @click="uploadImage">
                      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M939.717 106.665l-304.049 324.529-78.769 85.071-225.28 240.246-123.668-115.003-129.182-121.305-78.769 84.283 129.969 121.305 33.083 31.508 129.969 121.305 44.111 40.96 304.049-324.529 78.769-85.071 304.049-324.529-84.283-78.769z" fill="#ffffff"></path></svg>
                  </button>
              
                  <button className="btn btn-circle btn-primary" style="margin-left: 10px;" @click="scaleImage">
                      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path></svg>
                  </button>
                  <button className="btn btn-circle btn-gray" style="margin-left: 10px;" @click="cancelImage">
                      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
                  </button>
              </div>
          </div>

          <!-- 这个是用于预览图片的div,在最初页面中不可见 -->
          <div v-if="isImageVisible" class="image-modal" v-on:click="hideImage">
              <img v-bind:src="messageImageUrl" class="modal-image">
          </div>

          <button class="btn btn-sdu btn-straight btn-upload" @click="submitPost" :disabled="messageImageFile === undefined || yourMessage === ''">提交</button>


      </div>
    </div>

    

</template>

<style scoped>
.upload-btns{
    padding-top: 140px;
    padding-left: 30px;
}

.backImage{
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
}

.message_image_uploader {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  width: 150px;
  height: 150px;
  background-color: rgb(214, 214, 214,0.3);
  cursor: pointer;
  text-align: center;
}

.message_image_uploader:hover {
  border-color: var(--el-color-primary);
}

.message_uploader_icon {
  color: #8c939d;
  margin-top: 50px;
}
.message_image_uploader .message_image {
  width: 178px;
  height: 178px;
}

#message{
    background-color: rgb(214, 214, 214,0.3);
    border: none;
    width: 80%;
    font-size: 18px;
    border-radius: 5px;
    margin-top: 50px;
    height: 300px;
}

/* 横幅css开头 */
.avatarButton{
    padding-top: 125px;
    padding-left: 40px;
}

.avatarBack{
    width: 175px;
    height: 175px;
    background-size: 175px 175px;
}

.changeName{
    background-color: skyblue;
    color: white;
    border-radius: 5px;
    border: none;
    width: 50px;
    height: 30px;
    cursor: pointer;
    margin-left: 5px;
    font-size: 16px;
}
.nickname{
    position: relative;
    top: -18px;
    left: 18px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}
.avatar-nickname-exit{
    position: relative;
    right: 40px;
    top: 15px;
    display: inline-block;
}
.avatar{
    cursor: pointer;
}
/* 用于退出按钮的样式 */
.exit{
    cursor: pointer;
    font-size: 18px;
    margin-left: 180px;
    margin-top: 15px;
    /* border: 1px solid black; */
}

/* 按钮展示的css */

.btn {
  --btn-fg: #FFF;
  color: var(--btn-fg) !important;
  border-radius: .4em;
  padding: .3em 0;
  line-height: 1.5em;
  cursor: pointer;
  transition: filter .3s ease-out;
  width: 5em;
  text-align: center;
  font-size: 18px;
  border: 1px solid transparent;
}

.btn-gray {
  background-color: #E8E8E8;
  --btn-fg: #000;
}

.btn-primary {
  background-color: #0AF;
}

.btn-sdu {
  background-color: #9D0004;
}

.btn-upload {
  float: right;
  margin-top: 30px;
  margin-right: 10%;
}

.btn-straight {
  border-radius: .2em;
  width: 6em;
}

.btn-ok {
  background-color: #47c74c;
}

.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(100%) opacity(.5);
}

.btn-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-shadow: 1px 1px 4px 0 #0003;
}

/* 用于图片预览的css */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image {
  max-width: 80%;
  max-height: 80%;
}
</style>
